<template>
    <!---v-on 是对事件处理的一个指令
        语法：@click="事件处理函数"v-on:click="事件处理函数"
        v-on:click="methods(参数)"
    -->

    <h1>事件冒泡的处理</h1>
    <div @click="mpone">
        <button @click.stop="stopbtn">阻止事件冒泡</button>
        <a href="https://www.baidu.com" @click.prevent="stopbtn">阻止默认事件</a>
        <button @click.once="stopbtn">只执行一次</button>
    </div>


    <hr>
    <h1>超市购物，购买商品的数量</h1>
    <h2>购买商品的数量是：{{ count }}</h2>
    <button v-on:click="count=count +1">增加商品的数量</button>
    <button v-on:click="add">每次购买数量加1</button>
    <!--每次数量加5-->
    <button v-on:click="addCount(10)">每次购买数量加5</button><br>
    <br>
    <!--v-on的事件对象处理-->
    <a href="https://www.baidu.com" v-on:click="one">点击跳转到百度</a>
    <button v-on:click="two(10,$event)" href="https://www.baidu.com">阻止去百度</button>
</template>
<script>
export default {
    data() { 
        return {
            count:0
        }
    },
    methods: {
        mpone() { 
            console.log("水面被触发了一次");
            
        },
        stopbtn() { 
            console.log(1);
            
        },
        add() { 
            this.count = this.count + 1
        },
        addCount(num) { 
            console.log(num);
            
            // this.count += num
            this.count =this.count + num
        },
        one(event) { 
            console.log(event);
            //关闭默认事件
            event.preventDefault()
        },
        two(num,e) {
            console.log(num, e);
            e.preventDefault()
            
         }
    }
}

</script>